<template>
  <van-nav-bar title="城市切换" left-arrow @click-left="() => closeCitySwitch()" />
  <div class="city-switch">
    <h3>当前城市：</h3>
    <div class="city-switch-text">
      <span>{{ store.cityValue }}</span>
    </div>
    <h3>切换城市：</h3>
    <div class="city-switch-text">
      <span
        v-for="(item, index) in store.cityList"
        :key="index"
        @click="closeCitySwitch(item.name)"
        >{{ item.name }}</span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue';
import { taskStore } from '@/store/task.ts';

const store = taskStore();

if (store.cityList.length <= 0) store.getCityList();

const emits = defineEmits(['close']);
const closeCitySwitch = (name?: string) => {
  if (name) {
    store.setCityValue(name);
  }
  emits('close', false);
};
</script>

<style lang="scss" scoped>
.city-switch {
  padding: 0 0.7rem;
}
.city-switch h3 {
  font-size: 0.8rem;
  line-height: 0.8rem;
  font-weight: 500;
  color: #000000;
  margin: 0.7rem 0 0.96rem;
}
.city-switch-text span {
  width: 4.01rem;
  height: 1.6rem;
  line-height: 1.6rem;
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: 0.11rem;
  font-size: 0.64rem;
  text-align: center;
  font-weight: 400;
  color: #333333;
  margin: 0 0.7rem 0.8rem 0;
  display: inline-block;
}
.city-switch-text span:nth-child(4n) {
  margin-right: 0px;
}
</style>
